<template>
  <div>
    <span>Count</span>
    <p>当前的票房:{{ count }}</p>
    <p>主演: {{ actor }}</p>
    <p>双倍票房:{{ doubleCount }}</p>

    <div>
      <span>mutations的操作</span>
      <button @click="$store.commit('increment')">累加count-原始操作</button>
      <button @click="increment">累加count-封装操作</button>
      <button @click="$store.commit('incrementN', { n: 2 })">
        累加N -- count--原始操作
      </button>
      <button @click="incrementN({ n: 2 })">
        累加N -- count--封装方法操作
      </button>
    </div>

    <span>actions操作</span>
    <button @click="$store.dispatch('incrementWait')">
      延迟1s累加-原始操作
    </button>
    <button @click="incrementWait">延迟1s累加</button>
    <button @click="$store.dispatch('incrementNWait', { n: 2 })">
      延迟1s累加n--原始操作
    </button>
    <button @click="incrementNWait({ n: 2 })">延迟1s累加n</button>
  </div>

</template>

<script>
import { mapGetters, mapState, mapMutations,mapActions } from 'vuex'
export default {
  computed: {
    count() {
      return this.$store.state.count
    },
    // 获取state
    ...mapState(['actor']),
    // 获取getters
    ...mapGetters(['doubleCount'])
  },
  methods: {
    // 导入方法
    ...mapMutations(['increment', 'incrementN']),
    //actions方法
    ...mapActions(["incrementNWait", "incrementWait"]),
  }
}
</script>

<style scoped>
span {
  color: #fc5531;
}
</style>